import React,{Component} from 'react';
import { Form, Table, Button, message, DatePicker, Pagination } from 'antd';
import './index.less';
import axios from 'axios';
import Bread from '../common/Bread/index';
axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8'


class log extends React.Component {
	  constructor(props) {
			super(props);
			this.state = {
				page: 1,
				pageArr:['1','10','20','30','40','50','60','70','80','90'],
				limit: 10,
				totalnum: 0,
				data: [],
				beginTime: '',
				endTime: '',
				totalnum: 0,
		  	}
	  	}
	
	columns = [{
		title: '时间',
		dataIndex: '时间',
		key: '时间',
	  }, {
		title: '类型',
		dataIndex: '类型',
		key: '类型',
	  }, {
		title: '详情',
		dataIndex: '详情',
		key: '详情',
	}];

	onChangeBegin =(date, dateString)=> {
	  // console.log(date, dateString);
	  this.setState({
	  	beginTime: dateString,
	  })
	}
	onChangeEnd =(date, dateString)=> {
	  // console.log(date, dateString);
	  this.setState({
	  	endTime: dateString,
	  })
	}

	onShowSizeChange = (current, pageSize)=> {
		console.log(current, pageSize);
		this.setState({
			limit: pageSize,
		})
		this.getData(current,pageSize,this.state.beginTime,this.state.endTime);
	}
	onChangePage = (pageNumber)=> {
		// console.log('Page: ', pageNumber);
		this.setState({
			page: pageNumber,
		})
		this.getData(pageNumber);
	}

	filterFn =()=>{
		//筛选交互
		if(this.state.beginTime == ''){
			message.warning('请输入开始时间！')
		}else if(this.state.endTime == ''){
			message.warning('请输入结束时间！')
		}else{
			this.getData(this.state.page,this.state.limit,this.state.beginTime,this.state.endTime)
		}
	}	  

	getData =(page, limit = this.state.limit, beginTime = this.state.beginTime, endTime = this.state.endTime)=>{
		const Token = localStorage.getItem("token");
		const _this = this;
		axios({
			method: 'get',
			url: '/api/customer/userlogs/queryAllUserLogs',
			headers: {
				'Content-Type': 'application/json',
				Authorization: Token,
			},
			params: {
				page: page,
				limit: limit,
				beginTime: beginTime,
				endTime: endTime
			}
		})
		.then(function(response){
			// console.log(response)
			let data = [];
			response.data.data && response.data.data.rows.forEach((e,i)=>{
				if(e.flag == true){
					e.flag = '成功'
				}else {
					e.flag = '失败'
				}
				data.push({
					key: i+'',
					"时间": e.crtTime,
					"类型": e.opt,
					"详情": e.flag,
				})
			})
			_this.setState({
				data: data,
				totalnum: response.data.data.total,
			})
		})
		.catch(function(error){
		})
	}
	componentDidMount(){
		this.getData(this.state.page,this.state.limit,this.state.beginTime,this.state.endTime);
	}

	render(){
		return(
			<div>
				<Bread bread={['日志',['日志','log']]}/>
				<div className="logBox">
					<div className="datePicker">
						<span className="startTime">开始时间</span>
						<DatePicker autoFocus={true} showToday={false} onChange={this.onChangeBegin} />
						<span className="endTime">结束时间</span>
						<DatePicker showToday={false} onChange={this.onChangeEnd} />
						<Button type="primary" onClick={this.filterFn} className="filterBtn">筛选</Button>
					</div>
					<Table 
					columns={this.columns} 
					dataSource={this.state.data} 
					bordered
					pagination={false} />
					<div className="page_foot">
						<span className="data_num">共{this.state.totalnum}条</span>
						<Pagination 
							pageSizeOptions={this.state.pageArr} 
							className="page" 
							showSizeChanger 
							showQuickJumper
							onShowSizeChange={this.onShowSizeChange} 
							defaultCurrent={1} 
							total={this.state.totalnum} 
							onChange={this.onChangePage} />
					</div>
				</div>
			</div>	
			)
	}
}

export default log

